<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <title>流量充值</title>

    <link rel="stylesheet" type="text/css" href="css/wap/skmobile.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/wap/fastclick.min.js"></script>
    <script type="text/javascript" src="js/wap/spin.min.js"></script>
    <script type="text/javascript" src="js/wap/swiper.min.js"></script>
    <script type="text/javascript" src="js/dump.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
</head>
<body>
<div class="banner swiper-container-horizontal" style="">
    <div class="swiper-wrapper" style="transition: 0ms; -webkit-transition: 0ms; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px);">
    	{foreach item=t from=$flashList}
        <div class="swiper-slide swiper-slide-active" style="width: 757px;">
            <img src="{$t.img}" width="100%">
        </div>
        {/foreach}
        <!--  
        <div class="swiper-slide swiper-slide-next" style="width: 757px;">
            <a style="display: block" href="javascript:void(0);">
                <img src="images/banner2.jpg" width="100%">
            </a>
        </div>
        -->
    </div>
    <div class="swiper-pagination swiper-pagination-clickable">
    	{foreach item=t from=$flashList name=foo}
    	<span class="swiper-pagination-bullet {if $smarty.foreach.foo.index eq 0}swiper-pagination-bullet-active{/if}">
        </span>
        {/foreach}
        <!-- 
        <span class="swiper-pagination-bullet">
        </span>
         -->
    </div>
</div>
<div class="inputbox">
    <input class="input1" id="mobile" type="tel" placeholder="请输入手机号码" maxlength="11" value="">
    <span class="scope"></span>
    <!-- 历史充值号码 -->
    <div class="history-phone" style="display: none;"><p style="display: none;"><span class="close fr">清除</span><i>15558181659</i></p><p><span class="close fr">清除</span><i>13690765349</i></p></div></div>
<!-- 价格比对 -->
<div class="price-compare" style="display: none;">
    <p class="p1">
        请输入您要充值的手机号
        <br>
        系统会自动加载合适的充值产品
    </p>
    <!-- 
    <div class="price-comparetb">
        <table width="100%">
            <tbody>
                <tr class="us">
                    <td style="padding:0 0 8px 5px;"></td>
                    <td style="padding:0 0 8px 5px;">100M </td>
                    <td style="padding:0 0 8px 5px;">200M </td>
                    <td style="padding:0 0 8px 5px;">500M</td>
                    <td style="padding:0 0 8px 5px;"> 1GB</td>
                </tr>
               <tr>
			   		<td><b style="color:#a47e64">钱包君价</b></td>
					<td><span style="color:#a47e64">9.5</span></td>
					<td><span style="color:#a47e64">14.25</span></td>
					<td><span style="color:#a47e64">29.4</span></td>
					<td><span style="color:#a47e64">47.5</span></td>
				</tr>
				<tr>
					<td><b>官方价</b></td>
					<td><span>10</span></td>
					<td><span>15</span></td>
					<td><span>30</span></td>
					<td><span>50</span></td>
				</tr>
				<tr>
					<td><b>电商均价</b></td>
					<td><span>10</span></td>
					<td><span>14.25</span></td>
					<td><span>29.4</span></td>
					<td><span>47.5</span></td>
				</tr>
            </tbody>
        </table>
    </div>
    <p class="p2">
        我们只对比部分电商价格以及运营商官方价格，
        <br>
        其它的价格不在对比范围。
    </p>
     -->
</div>
<!-- 产品列表 -->
<div class="prolist" style=" display:block;">
    <!-- 推荐 -->
    <ul class="ullisttj">
    </ul>
    <ul class="ullist">
    </ul>
</div>
<div class="faq" style="padding: 15px">
    <a id="faq" style="color:#999">
        常见问题？
    </a>
</div>
<!--常见问题-->
<div id="faqtextbox">
    <span class="closehelp">
        ×
    </span>
    <div id="faqtext">
        <section style="margin:0" data-am-widget="accordion" class="am-accordion am-accordion-gapped"
        data-am-accordion="{  }">
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                   1、用户不存在、即此号码为空号不能充值。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                   2、已停机用户不能充值。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    3、用户状态异常（资料不全或资料与实际信息不符）情况下也不能充值。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    4、用户是黑名单不能进行充值。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    5、移动流量到账时间为48小时。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    6、部分号码服务密码为初始密码，订购失败率高，建议修改密码在进行订购。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    7、运营商系统出问题可能会导致充值失败，可重新充值。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    8、部分面额三个月内有效，请以运营商查询的信息为准。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    9、大部分省份流量包当月有效次月失效，部分手机号码设有灵活账期，以号码账期为准。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    10、全国移动小面值流量支持除广西移动外的所有省份，山东充值比较慢。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    11、充值时请关注页面提示，如显示全国可用，则表示可以全国漫游。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    12、充值时请仔细选择流量包，省内流量包不可在省外使用，全国流量可全国漫游。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    13、流量包可与其他流量叠加使用。可多次叠加。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    14、充值成功后有短信提醒，在月初月末充值高峰期，可能会有短信延迟现象。
                </dt>
            </dl>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    15、用户可登录网上营业厅、掌上营业厅、以及拨打运营商电话查询。
                </dt>
            </dl>
            
        </section>
    </div>
</div>
<div class="warning">
    手机格式不正确
</div>
<div id="spin" class="mask" style="display: none;">
    <div class="spinner" role="progressbar" style="position: absolute; width: 0px; z-index: 2000000000; left: 50%; top: 50%;">
        <div style="position: absolute; top: -2px; opacity: 0.25; -webkit-animation: opacity-100-25-0-12 1s linear infinite;">
            <div style="position: absolute; width: 12px; height: 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(0deg) translate(10px, 0px); border-radius: 2px; background: rgb(255, 255, 255);">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	var click = false;
	function toPay(id, mobile, scope) {
		if(click == false) {
			var url = "wap.php?m=recharge&a=pay&id=" + id + "&mobile=" + mobile + "&scope=" + scope + "{if $promoter}&promoter={$promoter}{/if}";
			location.href = url;
			click = true;
		}
		
	}

    $(function(){
        FastClick.attach(document.body);
        var target = document.getElementById('spin');
        new Spinner({
            color: "#fff"
        }).spin(target);

        var swiper = new Swiper('.banner', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 2000
        });

        var mobile1 = $('#mobile').val();
        var existsMobile = null;
        //加载手机号码
        loadmobile(mobile1);
        //有号码默认加载数据
        mobhasload();
        //原生anroid系统 异步加载手机号码
        loadAjaxMobileHistory();

        //获取焦点置空
        $('#mobile').focus(function(){
            var mobile = $('#mobile').val();
            if(mobile){
                $('#mobile').val('');
                loadStorage('');
                $('.price-compare').show();
                $('.prolist').hide();
                return;
            }
//			$('.history-phone').show();
        });
        //输入号码有历史号码弹出
        $('#mobile').on('input',function(){
            var mobile = $('#mobile').val();
            $('.price-compare').hide();
            $('.prolist').show();
            //读取
            loadStorage(mobile);

            loadData(mobile);
        });

        //直接选择历史手机号码记录
//        $('.history-phone').on('click','p i',function(){
//            var phonetext = $(this).text();
//            $(this).parent().hide();
//            $('#mobile').val(phonetext);
//            $('.history-phone').hide();
//            loadData(phonetext);
//        });

        //清除历史手机号码
        $('.history-phone').on('click','.close',function(){
            var phone = $(this).parent().find('i').text();
            mobileStr = localStorage.getItem('mobile');
            mobileArr = mobileStr ? mobileStr.split(',') : [];
            var i = $.inArray(phone,mobileArr);
            delete mobileArr[i];
            delHistoryPhone(phone);
            localStorage.setItem('mobile',mobileArr);
            // loadStorage(phone);
            $(this).parent().remove();
        });

        //存储手机历史记录
        $('body').on('click','.btnbuy',function(){
            saveStorage();
        });

        function loadData(mobile){
            if(existsMobile==null || existsMobile != mobile) {
                // console.log(11)
                $('.scope').html('');
                $('.prolist ul.ullisttj').empty()
                $('.prolist ul.ullist').empty();
                existsMobile = null;
                $('.price-compare').show();
            }else{
                return;
            }
            
            if(mobile.length == 11){
                $('.prolist').show();
                var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
                if(!reg.test(mobile)){
                    $('.warning').show();
                    setTimeout(function(){
                        $('.warning').hide();
                    },1000);
                    return;
                }
                existsMobile = mobile;
                getproduct();
                $('.price-compare').hide();
            }
        }

        function getproduct(){
            var mobile = $('#mobile').val();
            $('.history-phone').hide();
            $.ajax({
				'url':'wap.php?m=recharge&a=getProduct&mobile=' + mobile,
                'type':'post',
                'datayType':'json',
                'data':'',
                beforeSend:function(){
                    $('#spin').show();
                },
                success:function(data){
                    $('#spin').hide();
                    data = JSON.parse(data);
                	
                    var prodList = data.products;
                    var mobileInfo = data.mobileData;


                    if(prodList[0]!=undefined){ //有产品


                     var scope =mobileInfo.data.provinceName + mobileInfo.data.opName;
                        $('.scope').html(scope);

                        for(var i=0;i<prodList.length;i++){
                            var id =prodList[i].id;
                            var name = prodList[i].name;
                            var mb_value = prodList[i].mb_value;
                            var rangeName = prodList[i].range_name;
                            var price1= prodList[i].bonues_price;
                            var price2= prodList[i].price;
                            $('.prolist ul.ullist').append('<li><span id="name">'+name +'&nbsp;&nbsp;' + mb_value +'M</span><span class="time">' + rangeName + '可用，当月有效</span><span id="price1">￥'+price1+'</span><span id="price2">￥'+price2+'</span><span class="line"></span><span class="btnbuy" onclick="toPay(' + id + ',' + mobile + ", '" + scope + "');" + '"><a href="javascript:;">购买</a></span></li>');
                        }
                    }
                    if(recom.prod_par_value ==undefined && prodList[0]==undefined){

                        $('.prolist ul.ullist').html('<p style="text-align:center;padding:10px">对不起，没有对应产品</p>')
                    }
                    // console.log(recom);
                },
                error:function(){
                    alert('请求超时')
                }
            });

        }


        function saveStorage(){
            var mobile = $('#mobile').val();
            var mobileStr = localStorage.getItem('mobile');
            var mobileArr = mobileStr ? mobileStr.split(',') : [];
            if($.inArray(mobile, mobileArr)==-1){
                mobileArr.push(mobile);
                localStorage.setItem('mobile',mobileArr);
            }
        }

        function loadStorage(mobile){
            var mobileHis = localStorage.getItem('mobile');
            //var mobile =$('#mobile').val();
            if(!mobileHis){
                return;
            }
            var mob = getArray(mobile, mobileHis.split(','));

            var phtml = '';
            for(var i=0;i<5;i++){
                if(!mob[i]){continue;}
                phtml+= '<p><span class="close fr">清除</span><i>'+ mob[i] +'</i></p>';

            }
            $('.history-phone').show().html(phtml);
            //  console.log(mobileHis)

        }

        function loadAjaxMobileHistory(){
            // var mobileHis = localStorage.getItem('mobile');
            var mobile =$('#mobile').val();
            if(!mobile){
                getAjaxMobileHistory()
            }
        }
        function getAjaxMobileHistory(){
            $.ajax({
                "url": "../pms/getMobileByRefundHistory",
                data: {
                    "platform": 'wechat',
                },
                "dataType": "json",
                success: function (data) {
                    //  var len= data.mobile.length;
                    if(data.mobile.length!==0){
                        var curmobile = data.mobile[0];
                        $('#mobile').val(curmobile);
                        $('.price-compare').hide();
                        $('.prolist').show();
                        getproduct();
                    }
                    localStorage.setItem('mobile', data.mobile);
                    console.log(data.mobile)
                }
            })
        }

        function delHistoryPhone(mobile){
            $.ajax({
                "url": "../pms/delRechageHistory",
                data: {
                    "platform": 'wechat',
                    'mobile':mobile
                },
                "dataType": "json",
                success: function (data) {
                    // localStorage.setItem('mobile',data.);
                }
            })
        }
        function getArray(mobile, mobileArr) {
            var hash = {},
                len = mobileArr.length,
                inputLen = mobile.length,
                result = [];

            if(mobile.length==0){
                return result;
            }

            for (var i = 0; i < len; i++){
                if(mobile == mobileArr[i].substr(0,inputLen)){
                    result.unshift(mobileArr[i]);
                }
            }
            return result;
        }

        // 常见问题
        $('#faq').click(function(){
            $('#faqtextbox,.mask').show();
        });
        $('.closehelp,.mask').click(function(){
            $('#faqtextbox,.mask').hide();
        });

        function loadmobile(mobile){
            var mobileHis = localStorage.getItem('mobile');
            // console.log(mobileHis)
            if(mobileHis == null){
                return;
            }
            var mob = mobileHis.split(',');
            if(mob.length>0){
                var moblast =mob[mob.length-1];
                var mobile = 0;
                if(mobile==0){
                    $('#mobile').val(moblast);
                }else{
                    $('#mobile').val(mobile);
                }
            }
        }
        function mobhasload(){
            var mobile = $('#mobile').val();
            if(mobile && mobile.length==11){
                $('.prolist').show();
                $('.price-compare').hide();
                getproduct();
            }
        }


    })

</script>

</body>
</html>